<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="library/layui/css/layui.css">
    <script src="library/layui/layui.js"></script>

    <style>
        body {
            background-image: url(img/login/log_mian.jpg);
            background-size: cover; /* 使背景图片覆盖整个页面 */
            background-position: center; /* 背景图片居中 */
            height: 100vh; /* 设置高度为视口高度 */
            display: flex;
            justify-content: center; /* 水平居中对齐 */
            align-items: center; /* 垂直居中对齐 */
            margin: 0; /* 去掉默认边距 */
        }

        .login-box {
            background: linear-gradient(to bottom right, #4a90e2, #9013fe); /* 蓝色渐变背景 */
            padding: 30px; /* 增加内边距 */
            border-radius: 15px; /* 圆角 */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 阴影效果 */
            width: 400px; /* 增加登录框宽度 */
            text-align: center; /* 内容居中 */
            margin-left: 700px;

        }

        .login-box h2 {
            margin-bottom: 30px; /* 标题下边距 */
            font-family: 'Arial', sans-serif; /* 字体样式 */
            color: #fff; /* 字体颜色 */
        }

        .layui-form-item {
            display: flex; /* 使用 flexbox 布局 */
            align-items: center; /* 垂直居中对齐 */
            width: 100%; /* 宽度100% */
            margin-bottom: 10px; /* 每个输入框的下边距，调整为10px */
        }

        .layui-form-label {
            width: 100px; /* 标签宽度 */
            text-align: right; /* 标签右对齐 */
            color: #fff; /* 标签字体颜色 */
            padding-right: 10px; /* 标签与输入框之间的右边距 */
            padding-bottom: 0; /* 去掉标签底部的内边距 */
        }

        .layui-input-block {
            flex: 1; /* 输入框容器占据剩余空间 */
            margin-left: 0; /* 去掉左边距 */
            margin-right: 0; /* 去掉右边距 */
        }

        .input-icon {
            position: relative; /* 使图标相对定位 */
        }

        .input-icon i {
            position: absolute; /* 绝对定位图标 */
            left: 10px; /* 图标距离左侧的距离 */
            top: 50%; /* 垂直居中 */
            transform: translateY(-50%); /* 使图标垂直居中 */
            color: #ccc; /* 图标颜色 */
        }

        .layui-input {
            border-radius: 5px; /* 输入框圆角 */
            border: 1px solid #ccc; /* 边框颜色 */
            padding-left: 30px; /* 输入框左侧内边距，留出图标位置 */
            height: 40px; /* 增加输入框高度 */
            line-height: 40px; /* 设置行高，使文本垂直居中 */
            width: 100%; /* 输入框宽度 */
        }

        .layui-btn {
            width: 170px; /* 按钮宽度 */
            border-radius: 5px; /* 按钮圆角 */
            background-color: #4a90e2; /* 按钮背景色 */
            color: white; /* 按钮字体颜色 */
            margin-left: 97px;
            height: 40px;
        }

        .layui-btn:hover {
            background-color: #357ABD; /* 按钮悬停颜色 */
        }
    </style>
</head>

<body>
<div class="login-box">
    <h2>用户登录</h2>
    <form id="loginForm" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名:</label>
            <div class="layui-input-block input-icon">
                <i class="layui-icon layui-icon-user"></i> <!-- 用户名图标 -->
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码:</label>
            <div class="layui-input-block input-icon">
                <i class="layui-icon layui-icon-password"></i> <!-- 密码图标 -->
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-block">
                <input type="text" name="captcha" required lay-verify="required" placeholder="请输入验证码:" autocomplete="off" class="layui-input" style="width: 170px; display: inline-block;">
                <img src="/captcha" alt="验证码" id="captchaImage" style="cursor: pointer;margin-top: -5px" onclick="this.src='/captcha?'+Math.random();">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" id="loginButton">登录</button>
                <a href="mangjimima.html" style="margin-left: 5px">  忘记密码？</a>
            </div>
        </div>
    </form>
</div>

<script src="./index.js"></script> <!-- 引入外部JavaScript文件 -->
</body>
</html>
